<template>
  <div
    :class="className"
    :style="{height:height,width:width}"
  />
</template>

<script>
import echarts from 'echarts' // echarts theme
import { debounce } from '@/utils'
require('echarts/theme/macarons')

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHandler)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHandler)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },
    setOptions({ name, value, data }) {
      this.chart.setOption({
        title: {
          text: value,
          left: '38%',
          top: 'middle',
          textAlign: 'center',
          textStyle: {
            fontSize: '31',
            fontWeight: 'bold',
            color: '#fff',
            textAlign: 'center'
          }
        },
        legend: {
          show: true,
          icon: 'roundRect',
          top: '16%',
          right: '10%',
          width: '8',
          data: ['同比', '环比'],
          itemGap: 13,
          itemWidth: 13,
          itemHeight: 13,
          formatter: function(name) {
            const v = data.find(item => item.name === name).value
            return '{title|' + name + '}{value|' + (v) + '}{value|%}'
          },
          textStyle: {
            rich: {
              title: {
                fontSize: 14,
                color: '#B0D8F4'
              },
              value: {
                fontSize: 14,
                color: '#fff'
              }
            }
          }
        },
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: function(params) {
            return params.name + '：' + params.value + '%'
          }
        },
        xAxis: [{
          show: false
        }],
        series: [{
          name: '同比',
          type: 'pie',
          clockWise: false, // 顺时加载
          hoverAnimation: false, // 鼠标移入变大
          radius: [73 - 0 * 15 + '%', 65 - 0 * 15 + '%'],
          center: ['40%', '50%'],
          label: {
            show: false
          },
          roundCap: true,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#009AFF'
                },
                {
                  offset: 1,
                  color: '#65EFFF'
                }
              ]),
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            },
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            borderWidth: 5
          },
          data: [{
            value: data[0].value,
            name: data[0].name
          }, {
            value: data[0].value > 100 ? 0 : 100 - data[0].value,
            name: '',
            itemStyle: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0
            },
            tooltip: {
              show: false
            },
            hoverAnimation: false
          }]
        },
        {
          name: '同比',
          type: 'pie',
          roundCap: true,
          silent: true,
          z: 1,
          clockWise: false, // 顺时加载
          hoverAnimation: false, // 鼠标移入变大
          radius: [73 - 0 * 15 + '%', 65 - 0 * 15 + '%'],
          center: ['40%', '50%'],
          label: {
            show: false
          },
          itemStyle: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            borderWidth: 5
          },
          data: [{
            value: 7.5,
            itemStyle: {
              color: 'rgba(21, 40, 61, 1)',
              borderWidth: 0
            },
            tooltip: {
              show: false
            },
            hoverAnimation: false
          }, {
            value: 2.5,
            name: '',
            itemStyle: {
              color: 'rgba(0, 0, 0, 0)',
              borderWidth: 0
            },
            tooltip: {
              show: false
            },
            hoverAnimation: false
          }]
        },
        {
          name: '环比',
          type: 'pie',
          clockWise: false, // 顺时加载
          hoverAnimation: false, // 鼠标移入变大
          radius: [73 - 1 * 15 + '%', 65 - 1 * 15 + '%'],
          center: ['40%', '50%'],
          label: {
            show: false
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#FF9F37'
                },
                {
                  offset: 1,
                  color: '#FFC579'
                }
              ]),
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            },
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            borderWidth: 5
          },
          data: [{
            value: data[1].value,
            name: data[1].name
          }, {
            value: data[1].value > 100 ? 0 : 100 - data[1].value,
            name: '',
            itemStyle: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0
            },
            tooltip: {
              show: false
            },
            hoverAnimation: false
          }]
        },
        {
          name: '环比',
          type: 'pie',
          silent: true,
          z: 1,
          clockWise: false, // 顺时加载
          hoverAnimation: false, // 鼠标移入变大
          radius: [73 - 1 * 15 + '%', 65 - 1 * 15 + '%'],
          center: ['40%', '50%'],
          label: {
            show: false
          },
          itemStyle: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            borderWidth: 5
          },
          data: [{
            value: 7.5,
            itemStyle: {
              color: 'rgba(21, 40, 61, 1)',
              borderWidth: 0
            },
            tooltip: {
              show: false
            },
            hoverAnimation: false
          }, {
            value: 2.5,
            name: '',
            itemStyle: {
              color: 'rgba(0, 0, 0, 0)',
              borderWidth: 0
            },
            tooltip: {
              show: false
            },
            hoverAnimation: false
          }]
        },
        {
          // title背景层
          name: '背景圆环',
          z: 5,
          type: 'pie',
          cursor: 'default',
          center: ['40%', '50%'],
          radius: '40%',
          hoverAnimation: false,
          legendHoverLink: false,
          silent: true, // 不响应和触发鼠标事件
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: 'rgba(21, 53, 84, 0.5)'
                }
              }
            }
          ]
        }]
      }, true)
    }
  }
}
</script>
